// src/pages/home/widgets/updateGuestChannel/widgets/unselected/index.tsx
import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import Item from "@pages/home/widgets/updateUserChannel/widgets/unselected/Item";
import { useRequestAllChannelsQuery, useRequestUserChannelsQuery } from "@service/channel";


export default function Unselected() {
  // 获取所有频道列表
  const { data: all, isSuccess: allIsSuccess } = useRequestAllChannelsQuery(undefined);
  // 获取用户频道列表
  const { data: user, isSuccess: userIsSuccess } = useRequestUserChannelsQuery(undefined);

  // 如果所有频道列表或者用户频道列表没有获取成功, 阻止程序继续运行
  if (!allIsSuccess || !userIsSuccess) return null;

  // 获取用户未选择的频道列表
  const unSelectedChannels = all.data.channels.filter(
    (ac) => typeof user.data.channels.find((uc) => uc.id === ac.id) === "undefined"
  );

  // 渲染视图

  return (
    <>
      <div className={styles.title}>
        <h3>可选频道</h3>
        <div className={styles.list}>
          {unSelectedChannels.map((channel) => (
            <Item key={channel.id} channel={channel} seq={user.data.channels.length} />
          ))}
        </div>
      </div>
    </>
  );
}

